<template>
  <div class="app-container home" v-loading="loading">
    <el-row :gutter="10">
      <el-col :span="24">
        <div class="card-body">
          <el-row :gutter="10" v-if="Object.keys(newServer).length > 0 || Object.keys(oldServer).length > 0">
            <!-- 新服务器信息 -->
            <el-col :span="24" v-if="Object.keys(newServer).length > 0">
              <el-card>
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 10px;
                  "
                >
                  <span
                    style="color: #303133; font-size: 16px; font-weight: bold"
                    ><el-tag type="success">新：{{ newServer?.name }}</el-tag> <el-tag type="danger">{{ formatTime(newServer?.diskIO?.ms) }}</el-tag></span>
                  <el-button link type="primary" @click="newServerExpanded = !newServerExpanded">
                    {{ newServerExpanded ? "收起" : "展开" }}
                  </el-button>
                </div>
                <el-descriptions :column="3">
                  <el-descriptions-item label="CPU 使用率:">
                    <el-tag type="primary">{{ newServer?.cpuUsage?.toFixed(2)|| '-' }}%</el-tag>
                    &nbsp;负载&nbsp;&nbsp;<el-tag type="warning">{{ newServer?.avgLoad || '-'}}%</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="内存:">
                    <el-tag type="primary">{{ formatBytes(newServer?.memory_total) }}</el-tag>
                    已用&nbsp;&nbsp;<el-tag type="warning">{{ formatBytes(newServer?.memory_used) }}</el-tag>
                    可用&nbsp;&nbsp;<el-tag type="success">{{ formatBytes(newServer?.memory_free)}}</el-tag> 
                  </el-descriptions-item>
                  <el-descriptions-item label="虚拟内存:">
                    <el-tag type="primary">{{ formatBytes(newServer?.swap_total) }}</el-tag>
                    已用&nbsp;&nbsp;<el-tag type="warning">{{ formatBytes(newServer?.swap_used) }}</el-tag>
                    可用&nbsp;&nbsp;<el-tag type="success">{{ formatBytes(newServer?.swap_free)}}</el-tag> 
                  </el-descriptions-item>
                <!-- </el-descriptions> -->
                <!-- 磁盘 I/O 信息 -->
                <!-- <el-descriptions :column="3" v-if="newServerExpanded"> -->
                  <el-descriptions-item label="总IO:" v-if="newServerExpanded">
                    <el-tag type="primary">{{ formatBytes(newServer?.diskIO?.tIO) }}</el-tag>
                    &nbsp;&nbsp;耗时：
                    <el-tag type="success">{{
                      formatTime(newServer?.diskIO?.tIO_sec || "0")
                    }}</el-tag
                    >&nbsp;&nbsp;等待：
                    <el-tag type="warning">{{
                      formatTime(newServer?.diskIO?.tWaitTimeDelta)
                    }}</el-tag
                    >&nbsp;
                    <el-tag :type="getTagType(newServer?.diskIO?.tWaitPercent)"
                      >{{
                        newServer?.diskIO?.tWaitPercent?.toFixed(2)
                      }}%</el-tag
                    ></el-descriptions-item
                  >
                  <el-descriptions-item label="读取IO:" v-if="newServerExpanded">
                    <el-tag type="primary">{{ formatBytes(newServer?.diskIO?.rIO) }}</el-tag>
                    &nbsp;&nbsp;耗时：
                    <el-tag type="success">{{
                      formatTime(newServer?.diskIO?.rIO_sec || "0")
                    }}</el-tag
                    >&nbsp;&nbsp;等待：
                    <el-tag type="warning">{{
                      formatTime(newServer?.diskIO?.rWaitTimeDelta)
                    }}</el-tag
                    >&nbsp;
                    <el-tag :type="getTagType(newServer?.diskIO?.rWaitPercent)"
                      >{{
                        newServer?.diskIO?.rWaitPercent?.toFixed(2)
                      }}%</el-tag
                    >
                  </el-descriptions-item>
                  <el-descriptions-item label="写入IO:" v-if="newServerExpanded">
                    <el-tag type="primary">{{ formatBytes(newServer?.diskIO?.wIO) }}</el-tag>
                    &nbsp;&nbsp;耗时：
                    <el-tag type="success">{{
                      formatTime(newServer?.diskIO?.wIO_sec || "0")
                    }}</el-tag
                    >&nbsp;&nbsp;等待：
                    <el-tag type="warning">{{
                      formatTime(newServer?.diskIO?.wWaitTimeDelta)
                    }}</el-tag
                    >&nbsp;
                    <el-tag :type="getTagType(newServer?.diskIO?.wWaitPercent)"
                      >{{
                        newServer?.diskIO?.wWaitPercent?.toFixed(2)
                      }}%</el-tag
                    >
                  </el-descriptions-item>
                  <!-- <el-descriptions-item label="总等待时间："
                    ></el-descriptions-item
                  >
                  <el-descriptions-item label="读取等待时间："
                    ></el-descriptions-item
                  >
                  <el-descriptions-item label="写入等待时间："
                    ></el-descriptions-item
                  > -->
                </el-descriptions>
                <!-- 磁盘信息和网络信息左右布局，根据展开状态显示 -->
                <el-row :gutter="10" v-if="newServerExpanded">
                  <el-col :span="12">
                    <!-- 磁盘信息 -->
                    <el-descriptions
                      v-for="(disk, index) in newServer?.disks"
                      :key="index"
                      :title="`磁盘 ${index + 1} 信息`"
                      direction="vertical"
                      :column="7"
                      :size="newServer.disks.length > 3 ? 'small' : 'default'"
                      border
                    >
                      <el-descriptions-item label="文件系统">{{
                        disk.fs
                      }}</el-descriptions-item>
                      <el-descriptions-item label="类型">{{
                        disk.type
                      }}</el-descriptions-item>
                      <el-descriptions-item label="总大小">{{
                        formatBytes(disk.size)
                      }}</el-descriptions-item>
                      <el-descriptions-item label="已使用">{{
                        formatBytes(disk.used)
                      }}</el-descriptions-item>
                      <el-descriptions-item label="可用">{{
                        formatBytes(disk.available)
                      }}</el-descriptions-item>
                      <el-descriptions-item label="使用率"
                        >{{ disk.usePercent.toFixed(2) }}%</el-descriptions-item
                      >
                      <el-descriptions-item label="挂载点">{{
                        disk.mount
                      }}</el-descriptions-item>
                    </el-descriptions>
                  </el-col>
                  <el-col :span="12">
                    <!-- 网络信息 -->
                    <el-descriptions
                      v-for="(net, index) in newServer?.network"
                      :key="index"
                      :title="`网络 ${index + 1} 信息`"
                      direction="vertical"
                      :column="6"
                      :size="newServer.network.length > 3 ? 'small' : 'default'"
                      border
                    >
                      <template>
                        <el-descriptions-item label="接口">{{
                          net.iface
                        }}</el-descriptions-item>
                        <el-descriptions-item label="状态">{{
                          net.operstate
                        }}</el-descriptions-item>
                        <el-descriptions-item label="接收字节数">{{
                          formatBytes(net.rx_bytes)
                        }}</el-descriptions-item>
                        <el-descriptions-item label="发送字节数">{{
                          formatBytes(net.tx_bytes)
                        }}</el-descriptions-item>
                        <el-descriptions-item label="接收每秒">{{
                          formatBytes(net.rx_sec)
                        }}</el-descriptions-item>
                        <el-descriptions-item label="发送每秒">{{
                          formatBytes(net.tx_sec)
                        }}</el-descriptions-item>
                      </template>
                    </el-descriptions>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <!-- 旧服务器信息 -->
            <el-col :span="24" style="margin: 20px 0" v-if="Object.keys(oldServer).length > 0">
              <el-card>
                <!-- 磁盘 I/O 信息 -->
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 10px;
                  "
                >
                  <span
                    style="color: #303133; font-size: 16px; font-weight: bold"
                    ><el-tag type="primary">旧：{{ oldServer?.name }}</el-tag> <el-tag type="danger">{{ formatTime(oldServer?.diskIO?.ms) }}</el-tag></span>
                  <el-button link type="primary" @click="oldServerExpanded = !oldServerExpanded">
                    {{ oldServerExpanded ? "收起" : "展开" }}
                  </el-button>
                </div>
                <el-descriptions :column="3">
                  <el-descriptions-item label="CPU 使用率:">
                    <el-tag type="primary">{{ oldServer?.cpuUsage?.toFixed(2)|| '-' }}%</el-tag>
                    &nbsp;负载&nbsp;&nbsp;<el-tag type="warning">{{ oldServer?.avgLoad || '-'}}%</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="内存:">
                    <el-tag type="primary">{{ formatBytes(oldServer?.memory_total) }}</el-tag>
                    已用&nbsp;&nbsp;<el-tag type="warning">{{ formatBytes(oldServer?.memory_used) }}</el-tag>
                    可用&nbsp;&nbsp;<el-tag type="success">{{ formatBytes(oldServer?.memory_free)}}</el-tag> 
                  </el-descriptions-item>
                  <el-descriptions-item label="虚拟内存:">
                    <el-tag type="primary">{{ formatBytes(oldServer?.swap_total) }}</el-tag>
                    已用&nbsp;&nbsp;<el-tag type="warning">{{ formatBytes(oldServer?.swap_used) }}</el-tag>
                    可用&nbsp;&nbsp;<el-tag type="success">{{ formatBytes(oldServer?.swap_free)}}</el-tag> 
                  </el-descriptions-item>
                <!-- </el-descriptions> -->
                <!-- <el-descriptions :column="3"> -->
                  <el-descriptions-item label="总IO:" v-if="oldServerExpanded">
                    <el-tag type="primary">{{ formatBytes(oldServer?.diskIO?.tIO) }}</el-tag>
                    &nbsp;&nbsp;耗时：
                    <el-tag type="success">{{
                      formatTime(oldServer?.diskIO?.tIO_sec || "0")
                    }}</el-tag
                    >&nbsp;&nbsp;等待：
                    <el-tag type="warning">{{
                      formatTime(oldServer?.diskIO?.tWaitTimeDelta)
                    }}</el-tag
                    >&nbsp;
                    <el-tag :type="getTagType(oldServer?.diskIO?.tWaitPercent)"
                      >{{
                        oldServer?.diskIO?.tWaitPercent?.toFixed(2)
                      }}%</el-tag
                    >
                  </el-descriptions-item>
                  <el-descriptions-item label="读取IO:" v-if="oldServerExpanded">
                    <el-tag type="primary">{{ formatBytes(oldServer?.diskIO?.rIO) }}</el-tag>
                    &nbsp;&nbsp;耗时：
                    <el-tag type="success">{{
                      formatTime(oldServer?.diskIO?.rIO_sec || "0")
                    }}</el-tag
                    >&nbsp;&nbsp;等待：
                    <el-tag type="warning">{{
                      formatTime(oldServer?.diskIO?.rWaitTimeDelta)
                    }}</el-tag
                    >&nbsp;
                    <el-tag :type="getTagType(oldServer?.diskIO?.rWaitPercent)"
                      >{{
                        oldServer?.diskIO?.rWaitPercent?.toFixed(2)
                      }}%</el-tag
                    >
                  </el-descriptions-item>
                  <el-descriptions-item label="写入IO:" v-if="oldServerExpanded">
                    <el-tag type="primary">{{ formatBytes(oldServer?.diskIO?.wIO) }}</el-tag>
                    &nbsp;&nbsp;耗时：
                    <el-tag type="success">{{
                      formatTime(oldServer?.diskIO?.wIO_sec || "0")
                    }}</el-tag
                    >&nbsp;&nbsp;等待：
                    <el-tag type="warning">{{
                      formatTime(oldServer?.diskIO?.wWaitTimeDelta)
                    }}</el-tag
                    >&nbsp;
                    <el-tag :type="getTagType(oldServer?.diskIO?.wWaitPercent)"
                      >{{
                        oldServer?.diskIO?.wWaitPercent?.toFixed(2)
                      }}%</el-tag
                    >
                  </el-descriptions-item>
                </el-descriptions>
                <!-- 磁盘信息和网络信息左右布局，根据展开状态显示 -->
                <el-row :gutter="10" v-if="oldServerExpanded">
                  <el-col :span="12">
                    <!-- 磁盘信息 -->
                    <el-descriptions
                      v-for="(disk, index) in oldServer?.disks"
                      :key="index"
                      :title="`磁盘 ${index + 1} 信息`"
                      direction="vertical"
                      :column="7"
                      :size="oldServer.disks.length > 3 ? 'small' : 'default'"
                      border
                    >
                      <el-descriptions-item label="文件系统">{{
                        disk.fs
                      }}</el-descriptions-item>
                      <el-descriptions-item label="类型">{{
                        disk.type
                      }}</el-descriptions-item>
                      <el-descriptions-item label="总大小">{{
                        formatBytes(disk.size)
                      }}</el-descriptions-item>
                      <el-descriptions-item label="已使用">{{
                        formatBytes(disk.used)
                      }}</el-descriptions-item>
                      <el-descriptions-item label="可用">{{
                        formatBytes(disk.available)
                      }}</el-descriptions-item>
                      <el-descriptions-item label="使用率"
                        >{{ disk.usePercent.toFixed(2) }}%</el-descriptions-item
                      >
                      <el-descriptions-item label="挂载点">{{
                        disk.mount
                      }}</el-descriptions-item>
                    </el-descriptions>
                  </el-col>
                  <el-col :span="12">
                    <!-- 网络信息 -->
                    <el-descriptions
                      v-for="(net, index) in oldServer?.network"
                      :key="index"
                      :title="`网络 ${index + 1} 信息`"
                      direction="vertical"
                      :column="6"
                      :size="oldServer.network.length > 3 ? 'small' : 'default'"
                      border
                    >
                      <template>
                        <el-descriptions-item label="接口">{{
                          net.iface
                        }}</el-descriptions-item>
                        <el-descriptions-item label="状态">{{
                          net.operstate
                        }}</el-descriptions-item>
                        <el-descriptions-item label="接收字节数">{{
                          formatBytes(net.rx_bytes)
                        }}</el-descriptions-item>
                        <el-descriptions-item label="发送字节数">{{
                          formatBytes(net.tx_bytes)
                        }}</el-descriptions-item>
                        <el-descriptions-item label="接收每秒">{{
                          formatBytes(net.rx_sec)
                        }}</el-descriptions-item>
                        <el-descriptions-item label="发送每秒">{{
                          formatBytes(net.tx_sec)
                        }}</el-descriptions-item>
                      </template>
                    </el-descriptions>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 查询条件 -->
    <!-- <el-card class="query-form-card"> -->

    <div>
      <el-form :model="queryParams" ref="queryRef" :inline="true">
        <el-form-item label="" prop="edgroup_id">
          <el-select
            v-model="queryParams.edgroup_id"
            style="width: 200px"
            :filterable="true"
            :clearable="true"
            @change="changeQueryEdgroup"
            placeholder="请选择教育集团"
          >
            <el-option
              v-for="item in EdgroupList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="school_id" v-if="queryParams.edgroup_id">
          <el-select
            v-model="queryParams.school_id"
            style="width: 200px"
            :filterable="true"
            :clearable="true"
            @change="changeQuerySchool"
            placeholder="请选择学校"
          >
            <el-option
              v-for="item in schoolList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="class_id" v-if="queryParams.school_id">
          <el-select
            v-model="queryParams.class_id"
            style="width: 200px"
            :filterable="true"
            :clearable="true"
            placeholder="请选择班级"
          >
            <el-option
              v-for="item in classList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="mac">
          <el-input
            v-model="queryParams.mac"
            placeholder="请输入网关MAC地址"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="site">
          <el-select
            v-model="queryParams.site"
            placeholder="请选择分布位置"
            style="width: 260px"
            clearable
          >
            <el-option
              v-for="dict in gw_site_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          <el-button
            :icon="queryParams.status ? 'VideoPause' : 'VideoPlay'"
            @click="timedQueryDetail"
            >{{ queryParams.status ? "暂停" : "开始" }}</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- </el-card> -->
    <!-- 顶部统计组件 -->
    <el-row :gutter="16" class="optimized-statistic-row">
      <!-- 室外网关统计卡片 -->
      <el-col
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
        :xl="6"
        :xxl="6"
        style="margin-bottom: 15px"
      >
        <div
          class="statistic-card optimized-card tech-gradient"
          style="text-align: center"
        >
          <div
            class="statistic-title"
            style="display: flex; align-items: center"
          >
            室外网关
            <el-tooltip
              effect="dark"
              content="室外网关的总数、在线数、离线数统计"
              placement="top"
            >
              <el-icon class="info-icon" style="margin-left: 5px">
                <Warning />
              </el-icon>
            </el-tooltip>
          </div>
          <!-- 展示数据 -->
          <div
            class="statistic-ratio"
            style="color: #ffffff; display: flex; justify-content: space-around"
          >
            <div>
              <el-statistic
                :value="siteGWStats.out.total"
                :value-style="{ color: '#ffffff', fontWeight: 'bold' }"
              />
              <div>总数</div>
            </div>
            <div @click="showMacCard('out', 'online',)">
              <el-statistic
                :value="siteGWStats.out.online"
                :value-style="{
                  color: 'rgb(125, 254, 62)',
                  fontWeight: 'bold',
                }"
              />
              <div>在线</div>
            </div>
            <div @click="showMacCard('out', 'offline')">
              <el-statistic
                :value="siteGWStats.out.offline"
                :value-style="{
                  color: '#e54949',
                  fontWeight: 'bold',
                  textShadow: '0 0 2px white',
                }"
              />
              <div>离线</div>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 室内网关统计卡片 -->
      <el-col
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
        :xl="6"
        :xxl="6"
        style="margin-bottom: 15px"
      >
        <div
          class="statistic-card optimized-card tech-gradient"
          style="text-align: center"
        >
          <div
            class="statistic-title"
            style="display: flex; align-items: center"
          >
            室内网关
            <el-tooltip
              effect="dark"
              content="室内网关的总数、在线数、离线数及离线率统计"
              placement="top"
            >
              <el-icon class="info-icon" style="margin-left: 5px">
                <Warning />
              </el-icon>
            </el-tooltip>
          </div>
          <!-- 展示数据 -->
          <div
            class="statistic-ratio"
            style="color: #ffffff; display: flex; justify-content: space-around"
          >
            <div>
              <el-statistic
                :value="siteGWStats.in.total"
                :value-style="{ color: '#ffffff', fontWeight: 'bold' }"
              />
              <div>总数</div>
            </div>
            <div  @click="showMacCard('in', 'online')">
              <el-statistic
                :value="siteGWStats.in.online"
                :value-style="{
                  color: 'rgb(125, 254, 62)',
                  fontWeight: 'bold',
                }"
              />
              <div>在线</div>
            </div>
            <div  @click="showMacCard('in', 'offline')">
              <el-statistic
                :value="siteGWStats.in.offline"
                :value-style="{
                  color: '#e54949',
                  fontWeight: 'bold',
                  textShadow: '0 0 2px white',
                }"
              />
              <div>离线</div>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 充电箱内网关统计卡片 -->
      <el-col
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
        :xl="6"
        :xxl="6"
        style="margin-bottom: 15px"
      >
        <div
          class="statistic-card optimized-card tech-gradient"
          style="text-align: center"
        >
          <div
            class="statistic-title"
            style="display: flex; align-items: center"
          >
            充电箱内
            <el-tooltip
              effect="dark"
              content="充电箱内网关的总数、在线数、离线数及离线率统计"
              placement="top"
            >
              <el-icon class="info-icon" style="margin-left: 5px">
                <Warning />
              </el-icon>
            </el-tooltip>
          </div>
          <!-- 展示数据 -->
          <div
            class="statistic-ratio"
            style="color: #ffffff; display: flex; justify-content: space-around"
          >
            <div>
              <el-statistic
                :value="siteGWStats.wear_on.total"
                :value-style="{ color: '#ffffff', fontWeight: 'bold' }"
              />
              <div>总数</div>
            </div>
            <div @click="showMacCard('wear_on', 'online')">
              <el-statistic
                :value="siteGWStats.wear_on.online"
                :value-style="{
                  color: 'rgb(125, 254, 62)',
                  fontWeight: 'bold',
                }"
              />
              <div>在线</div>
            </div>
            <div @click="showMacCard('wear_on', 'offline')">
              <el-statistic
                :value="siteGWStats.wear_on.offline"
                :value-style="{
                  color: '#e54949',
                  fontWeight: 'bold',
                  textShadow: '0 0 2px white',
                }"
              />
              <div>离线</div>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 其他网关统计卡片 -->
      <el-col
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
        :xl="6"
        :xxl="6"
        style="margin-bottom: 15px"
      >
        <div
          class="statistic-card optimized-card tech-gradient"
          style="text-align: center"
        >
          <div
            class="statistic-title"
            style="display: flex; align-items: center"
          >
            其他位置
            <el-tooltip
              effect="dark"
              content="其他位置网关的总数、在线数、离线数及离线率统计"
              placement="top"
            >
              <el-icon class="info-icon" style="margin-left: 5px">
                <Warning />
              </el-icon>
            </el-tooltip>
          </div>
          <!-- 展示数据 -->
          <div
            class="statistic-ratio"
            style="color: #ffffff; display: flex; justify-content: space-around"
          >
            <div>
              <el-statistic
                :value="siteGWStats.other.total"
                :value-style="{ color: '#ffffff', fontWeight: 'bold' }"
              />
              <div>总数</div>
            </div>
            <div @click="showMacCard('other', 'online')">
              <el-statistic
                :value="siteGWStats.other.online"
                :value-style="{
                  color: 'rgb(125, 254, 62)',
                  fontWeight: 'bold',
                }"
              />
              <div>在线</div>
            </div>
            <div @click="showMacCard('other', 'offline')">
              <el-statistic
                :value="siteGWStats.other.offline"
                :value-style="{
                  color: '#e54949',
                  fontWeight: 'bold',
                  textShadow: '0 0 2px white',
                }"
              />
              <div>离线</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 中间卡片 -->
    <div v-if="gwList && gwList.length > 0">
      <el-row :gutter="20" class="middle-card-container">
        <el-col
  v-for="(item, index) in gwList"
  :key="index"
  :xs="24"
  :sm="12"
  :md="12"
  :lg="8"
  :xl="6"
  :xxl="4"
>
  <el-card class="optimized-middle-card new-middle-card horizontal-middle-card">
    <!-- 学校名称 -->
    <div class="horizontal-school-name">
      <el-tooltip effect="dark" :content="item.schoolName" placement="top">
        <span class="school-name-text">{{ item.schoolName }}</span>
      </el-tooltip>
    </div>
    <!-- 统计项横向排列 -->
    <div class="horizontal-stat-list">
      <div
        class="stat-icon-item-horizontal"
        @click="showMacCard('list', 'offline', 'offlineMacs', index)"
      >
        <el-tooltip content="总:离线数/总数" placement="top">
          <span>
            <el-icon style="color:#e54949"><WarningFilled /></el-icon>
            <span class="stat-value">{{ item.offline }}/{{ item.total }}</span>
          </span>
        </el-tooltip>
      </div>
      <div
        class="stat-icon-item-horizontal"
        @click="showMacCard('list', 'offline', 'sitein', index)"
      >
        <el-tooltip content="室内:离线数/总数" placement="top">
          <span>
            <el-icon style="color:#f39c12"><HomeFilled /></el-icon>
            <span class="stat-value">{{ item?.siteinOfflineCount || 0 }}/{{ Number(item?.siteinOnlineCount||0) +  Number(item?.siteinOfflineCount||0) }}</span>
          </span>
        </el-tooltip>
      </div>
      <div
        class="stat-icon-item-horizontal"
        @click="showMacCard('list', 'offline', 'siteout', index)"
      >
        <el-tooltip content="室外:离线数/总数" placement="top">
          <span>
            <el-icon style="color:#409eff"><Location /></el-icon>
            <span class="stat-value">{{ item?.siteoutOfflineCount || 0 }}/{{ Number(item?.siteoutOnlineCount||0) +  Number(item?.siteoutOfflineCount||0)}}</span>
          </span>
        </el-tooltip>
      </div>
      <div
        class="stat-icon-item-horizontal"
        @click="showMacCard('list', 'offline', 'sitewearon',index)"
      >
        <el-tooltip content="充电箱:离线数/总数" placement="top">
          <span>
            <el-icon style="color:#67c23a"><Box /></el-icon>
            <span class="stat-value">{{ item?.sitewearonOfflineCount || 0 }}/{{ Number(item?.sitewearonOnlineCount||0) +  Number(item?.sitewearonOfflineCount||0) }}</span>
          </span>
        </el-tooltip>
      </div>
      <div
        class="stat-icon-item-horizontal"
        @click="showMacCard('list', 'offline', 'siteother', index)"
      >
        <el-tooltip content="其他:离线数/总数" placement="top">
          <span>
            <el-icon style="color:#909399"><MoreFilled /></el-icon>
            <span class="stat-value">{{ item?.siteotherOfflineCount || 0 }}/{{ Number(item?.siteotherOnlineCount||0) +  Number(item?.siteotherOfflineCount||0) }}</span>
          </span>
        </el-tooltip>
      </div>
    </div>
  </el-card>
</el-col>
      </el-row>
    </div>
    <el-dialog
      v-model="showMacCardDialog"
      :title="showMacCardDialogTitle"
      width="90%"
      append-to-body
      :before-close="handleMacDialogClose"
    >
      <el-table
        ref="tableContainer"
        :data="showMacCardList"
        size="small"
        style="width: 100%"
        :height="tableHeight"
        row-key="mac"
      >
        <el-table-column prop="mac" label="网关MAC" min-width="100" sortable />
        <el-table-column prop="className" label="班级" sortable />
        <el-table-column prop="gwSite" label="网关位置" sortable>
          <template #default="scope">
            <dict-tag
              v-if="scope.row?.gwSite"
              :options="gw_site_type"
              :value="scope.row?.gwSite"
            />
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="gwRegTime"
          label="在线时间"
          min-width="220"
          sortable
        >
          <template #default="scope">
            <!-- {{ scope.row.time ? formartIOSDate(scope.row.time) : "--" }} -->
            <span v-if="scope.row.gwRegTime">
              {{ scope.row.gwRegTime || "--" }}(
              <span style="color: #67c23a">{{
                formatOnlineTime(scope.row.gwRegTime)
              }}</span>
              )
            </span>
            <span v-else> -- </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100">
          <template #default="scope">
            <el-button
              link
              icon="ChromeFilled"
              @click="handleOperate(scope.row, 'telnet')"
              type="primary"
              :disabled="showMacCardDialogType == 'offline'"
              >终端</el-button
            >
            <el-dropdown
              style="
                --el-dropdown-menu-item-hover-bg-color: var(
                  --el-color-primary-light-9
                );
                vertical-align: middle;
              "
            >
              <el-button link type="primary">
                <el-icon><DArrowRight /></el-icon> 更多
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    icon="Sunrise"
                    @click="() => handleLight(scope.row, 'red')"
                    style="color: #f56c6c"
                    >红灯</el-dropdown-item
                  >
                  <el-dropdown-item
                    icon="Sunrise"
                    @click="() => handleLight(scope.row, 'green')"
                    style="color: #67c23a"
                    >绿灯</el-dropdown-item
                  >
                  <el-dropdown-item
                    icon="Sunrise"
                    @click="() => handleLight(scope.row, 'blue')"
                    style="color: #409eff"
                    >蓝灯</el-dropdown-item
                  >
                  <el-dropdown-item
                    icon="Bell"
                    @click="() => handleOperate(scope.row, 'buzzer')"
                    style="color: #e6a23c"
                    >蜂鸣</el-dropdown-item
                  >
                  <!-- <el-dropdown-item icon="ChromeFilled" @click="() => handleOperate(scope.row, 'telnet')">终端</el-dropdown-item> -->
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup name="Index">
import { ref, getCurrentInstance, onMounted, onUnmounted } from "vue";
import { formartIOSDate, formatDate, formatSeconds } from "@/utils/dateFormart";
import { useMessage } from "@/hooks/useMessage";
import { getGwStatistics, getServerStatus } from "@/api/index";
import { getClassList, getClassGwControlLed } from "@/api/system/school/class";
import { getSchoolList } from "@/api/system/school/school";
import { getEdgroupList } from "@/api/system/school/edgroup";
import gateway from "@/views/gateway/index.vue";
const { proxy } = getCurrentInstance();
const { gw_site_type } = proxy.useDict("gw_site_type");
console.log("gw_site_type", gw_site_type);
const message = useMessage();
const EdgroupList = ref();
const schoolList = ref([]);
const classList = ref([]);
const loading = ref(false); // 加载状态
const oldServer = ref({});
const newServer = ref({}); // 服务器参数
const siteGWStats = ref({
  out: {
    online: 0,
    offline: 0,
    total: 0,
    onlineRatio: 0,
    offlineRatio: 0,
  },
  in: {
    online: 0,
    offline: 0,
    total: 0,
    onlineRatio: 0,
    offlineRatio: 0,
  },
  wear_on: {
    online: 0,
    offline: 0,
    total: 0,
    onlineRatio: 0,
    offlineRatio: 0,
  },
  other: {
    online: 0,
    offline: 0,
    total: 0,
    onlineRatio: 0,
    offlineRatio: 0,
  },
}); // 网关位置统计数据
// 模拟数据
const totalGateways = ref(0);
const onlineGateways = ref(0);
const onlineRatio = ref(0);
const onlineMacs = ref([]);
const offlineGateways = ref(0);
const offlineMacs = ref([]);
const offlineRatio = ref(0);
const gwList = ref([]);
const showMacCardDialog = ref(false);
const showMacCardDialogType = ref(null);
const showMacCardDialogTitle = ref(null);
const showMacCardList = ref([]);
// 定义表格容器的引用
const tableContainer = ref(null);
// 定义表格高度
const tableHeight = ref(500);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    edgroup_id: undefined,
    school_id: undefined,
    class_id: undefined,
    mac: undefined,
    version: undefined,
    site: undefined,
    status: false,
  },
});
// 控制新服务器磁盘和网络信息的展开和收起
const newServerExpanded = ref(false);
// 控制旧服务器磁盘和网络信息的展开和收起
const oldServerExpanded = ref(false);
const formatTime = (ms) => {
  if (!ms) return "0ms";
  if (ms < 1000) {
    return `${Number(ms).toFixed(2)}ms`;
  } else if (ms < 60000) {
    const seconds = (ms / 1000).toFixed(2);
    return `${seconds}s`;
  } else if (ms < 3600000) {
    const minutes = (ms / 60000).toFixed(2);
    return `${minutes}min`;
  } else {
    const hours = (ms / 3600000).toFixed(2);
    return `${hours}h`;
  }
};
const getTagType = (percent) => {
  if (percent === undefined || percent === null) {
    return "info";
  }
  if (percent < 30) {
    return "success";
  } else if (percent < 70) {
    return "warning";
  } else {
    return "danger";
  }
};
// 原代码中直接使用 disk.size，当传入的 disk 是一个数字而非对象时会出错，现直接使用传入的 disk 作为字节数
const formatBytes = (disk) => {
  const bytes = Number(disk);
  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
  if (isNaN(bytes) || bytes === 0) return "0 Byte";
  const i = Math.min(
    Math.floor(Math.log(bytes) / Math.log(1024)),
    sizes.length - 1
  );
  return (bytes / Math.pow(1024, i)).toFixed(2) + " " + sizes[i];
};
const { queryParams } = toRefs(data);
const refreshTimer = ref(null);
const formatOnlineTime = (time, status) => {
  if (!time) {
    return " -- ";
  }
  const countTime = status ? formatSeconds(time) : formatDate(time);
  return countTime || " -- ";
};

function handleOperate(row, type) {
  if (type == "buzzer") {
    // 蜂鸣器操作
    proxy.$modal.msgError("蜂鸣器操作即将开放");
    return;
  }
  if (type == "telnet") {
    // 生成 32位长度数字+字母的token，用于连接BeConsole
    const token = Math.random().toString(36).substring(2, 34);
    getClassGwControlLed({
      action: "telnet",
      gw_mac: row.mac,
      token: token,
      // url: `wss://beconsole-proxy.zhiyu.school/device?token=${token}`,
    }).then((res) => {
      console.log("等待连接BeConsole res", res);
      proxy.$modal.msgSuccess("连接BeConsole");
      // 打开BeConsole
      window.open(
        `https://beconsole.become.cool/?connType=ws&connUrl=wss://beconsole-proxy.zhiyu.school/terminal?token=${token}`
      );
    });
  }
}
function handleLight(row, color) {
  console.log("闪灯 选择", row, color);
  const colorValue =
    color === "red"
      ? {
          red: 1, // 0-255, 0:不亮, 255需转1因为硬件暂不支持
          green: 0,
          blue: 0,
        }
      : color === "green"
      ? {
          red: 0,
          green: 1,
          blue: 0,
        }
      : color === "blue"
      ? {
          red: 0,
          green: 0,
          blue: 1,
        }
      : {
          red: 1,
          green: 1,
          blue: 1,
        };
  console.log("闪灯 入参 ", {
    action: "led",
    gw_mac: row.mac,
    led1: colorValue,
  });
  getClassGwControlLed({
    action: "led",
    gw_mac: row.mac,
    led1: colorValue,
  }).then((res) => {
    console.log("闪灯 res", res);
    proxy.$modal.msgSuccess("闪灯成功");
  });
}

// getGwStatistics 函数用于获取网关统计数据
const fetchGwStatistics = async () => {
  try {
    const response = await getGwStatistics(queryParams.value);
    console.log("获取网关统计数据:", response);
    if (response.code === 200) {
      const { dataList, totalStat, siteStats } = response.data;
      if(siteStats){
        siteStats.map((item) => {
          siteGWStats.value[item.site]["total"] = item.total;
          siteGWStats.value[item.site]["online"] = item.online;
          siteGWStats.value[item.site]["offline"] = item.offline;
          siteGWStats.value[item.site]["onlineRatio"] = item.onlineRatio;
          siteGWStats.value[item.site]["offlineRatio"] = item.offlineRatio;
          siteGWStats.value[item.site]["onlineMacs"] = item.onlineMacs;
          siteGWStats.value[item.site]["offlineMacs"] = item.offlineMacs;
        });
      } else {
        siteGWStats.value = {
          out: {
            online: 0,
            offline: 0,
            total: 0,
            onlineRatio: 0,
            offlineRatio: 0,
          },
          in: {
            online: 0,
            offline: 0,
            total: 0,
            onlineRatio: 0,
            offlineRatio: 0,
          },
          wear_on: {
            online: 0,
            offline: 0,
            total: 0,
            onlineRatio: 0,
            offlineRatio: 0,
          },
          other: {
            online: 0,
            offline: 0,
            total: 0,
            onlineRatio: 0,
            offlineRatio: 0,
          }
        }
      }
      onlineGateways.value = totalStat.online;
      onlineRatio.value = totalStat.onlineRatio;
      onlineMacs.value = totalStat.onlineMacs;
      offlineRatio.value = totalStat.offlineRatio;
      offlineGateways.value = totalStat.offline;
      offlineMacs.value = totalStat.offlineMacs;
      totalGateways.value = totalStat.total;
      gwList.value = dataList;
      // 更新 schoolGatewayData 的值为网关统计数据中的 school_gateway 字段
    } else {
      // 如果响应数据中的 code 不为 0，表示失败
      message.notifyError(response.message); // 调用 message 的 notifyError 方法显示错误消息
    }
  } catch (error) {
    // 如果发生异常
    console.error("获取网关统计数据失败:", error); // 打印错误信息到控制台
    message.notifyError("获取网关统计数据失败"); // 调用 message 的 notifyError 方法显示错误消息
  }
};
// 切换教育集团
function changeQueryEdgroup() {
  queryParams.value.school_id = null;
  schoolList.value = [];
  let params = {
    id: queryParams.value.edgroup_id,
  };
  getSchoolList(params).then((res) => {
    schoolList.value = res.data.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
        photo: item.photo,
      };
    });
  });
}
// 切换学校
function changeQuerySchool() {
  queryParams.value.class_id = null;
  classList.value = [];
  let params = {
    school_id: queryParams.value.school_id,
  };
  // console.log('params', params)
  getClassList(params).then((res) => {
    // console.log("班级列表", res.data.data);
    classList.value = res.data.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
        photo: item.photo,
      };
    });
  });
}
function initData() {
  getEdgroupList().then((res) => {
    EdgroupList.value = res.data.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
        photo: item.photo,
      };
    });
  });
  getSchoolList().then((res) => {
    schoolList.value = res.data.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
        photo: item.photo,
      };
    });
  });
  getClassList().then((res) => {
    classList.value = res.data.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
        photo: item.photo,
      };
    });
  });
  fetchGwStatistics();
  showServerStatus();
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  fetchGwStatistics();
  showServerStatus();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
// 计算表格高度的函数
const calculateTableHeight = () => {
  if (tableContainer.value) {
    // 这里可以根据实际需求调整计算方式，例如减去一些固定的边距等
    tableHeight.value =
      window.innerHeight - tableContainer.value.offsetTop - 50;
  }
};

// 监听窗口大小变化事件
const handleResize = () => {
  calculateTableHeight();
};
const handleMacDialogClose = () => {
  showMacCardDialog.value = false;
  showMacCardList.value = [];
  showMacCardDialogType.value = null;
  showMacCardDialogTitle.value = null;
};
const showServerStatus = async (temp, type, index) => {
  try {
    const response = await getServerStatus(queryParams.value);
    console.log("获取服务数据:", response);
    if (response?.code === 200) {
      newServer.value = response?.data?.newServer || {};
      oldServer.value = response?.data?.oldServer || {};
    } else {
      newServer.value = {}
      oldServer.value = {};
      message.notifyError(response.message);
    }
  } catch (error) {
    newServer.value = {}
    oldServer.value = {};
    console.error("获取服务数据失败:");
    message.notifyError("获取服务数据失败");
  }
};
const showMacCard = (temp, type, key, index) => {
  loading.value = true;
  switch(temp){
    case "out":
    case "in":
    case "wear_on":
    case "other":
      showMacCardList.value = siteGWStats.value[temp][ type == "online" ? 'onlineMacs' : 'offlineMacs'] || [];
      break;
    case "list":
      showMacCardList.value = gwList.value[index][key] || [];
      break;
    default:
      showMacCardList.value = []
      break;
  }
  showMacCardDialogType.value = type;
  showMacCardDialogTitle.value =
    type == "online" ? "在线网关MAC列表" : "离线网关MAC列表";
  if (showMacCardList.value.length > 0) {
    showMacCardDialog.value = true;
    setTimeout(() => {
      loading.value = false;
    }, 3000);
  } else {
    loading.value = false;
    proxy.$modal.msgError("暂无数据");
  }
};
/** 详情开始暂停按钮操作 */
function timedQueryDetail() {
  if (queryParams.value.status) {
    console.log("暂停 清除定时器");
    clearInterval(refreshTimer.value);
    queryParams.value.status = false;
    return;
  } else {
    // 先清除之前的定时器
    if (refreshTimer.value) {
      console.log("show 清除定时器");
      clearInterval(refreshTimer.value);
      refreshTimer.value = null;
    }
    // 立即获取一次数据
    fetchGwStatistics();
    showServerStatus();
    queryParams.value.status = true;
    // 设置定时器，每1秒刷新一次
    refreshTimer.value = setInterval(() => {
      fetchGwStatistics();
      showServerStatus();
    }, 12000);
    queryParams.value.status = true;
  }
  // queryParamsDetail.value.status = !queryParamsDetail.value.status
}
onMounted(() => {
  initData();
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  if (refreshTimer) {
    clearInterval(refreshTimer);
  }
});
</script>

<style scoped lang="scss">
.home {
  .el-statistic {
    --el-statistic-content-font-size: 28px;
    --el-statistic-title-color: #ffffff;
  }
}
/* 
深度复写该样式，将 .el-statistic__content 的颜色设置为动态的，
根据不同的状态类（default-color、success-color、danger-color）来决定颜色，
同时移除 !important 以遵循更好的样式优先级规则。
*/
.home {
  .default-color {
    color: #409eff !important;
  }

  .success-color {
    color: #65d52f !important;
  }

  .danger-color {
    color: rgb(229 73 73) !important;
  }
}
.top-statistics {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.middle-card {
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 20px;
}

.left-school-name {
  font-size: 18px;
  font-weight: bold;
}

.right-gateway-stats {
  display: flex;
  flex-direction: column;
}

.stat-item {
  cursor: pointer;
  &:hover {
    color: blue;
  }
}

.gateway-list {
  border: 1px solid #ccc;
  padding: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
.optimized-statistic-row {
  // margin-bottom: 20px; // 为统计行添加底部边距
}

.statistic-card {
  background-color: #fff; // 卡片背景颜色
  border-radius: 8px; // 卡片圆角
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); // 卡片阴影
  padding: 16px; // 卡片内边距
  height: 100%; // 确保卡片高度一致
  // margin-bottom: 10px; // 为卡片添加底部边距
}

.statistic-title {
  display: flex;
  align-items: center; // 垂直居中对齐标题和提示图标
  font-size: 16px; // 标题字体大小
  font-weight: 500; // 标题字体粗细
  margin-bottom: 8px; // 标题底部边距S
  color: #ffffff; // 标题颜色
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); // 标题文字阴影
}

.info-icon {
  margin-left: 8px; // 提示图标左侧边距
  // color: #909399; // 提示图标颜色
  color: #ffffff; // 提示图标颜色
  font-size: 18px; // 提示图标大小
  cursor: pointer; // 鼠标悬停显示指针
}

.statistic-footer {
  margin-top: 16px; // 页脚顶部边距
  text-align: right; // 页脚内容右对齐
}

.tech-link {
  // color: #409EFF; // 链接颜色
  color: #ffffff; // 链接颜色
  // text-decoration: none; // 去除下划线
  cursor: pointer; // 鼠标悬停显示指针
  // &:hover {
  //   text-decoration: underline; // 鼠标悬停显示下划线
  // }
}

.tech-gradient {
  background: linear-gradient(to bottom right, #32b3d3, #409eff);
}
// 添加占比样式
.statistic-ratio {
  font-size: 18px;
  margin-top: 4px;
  font-weight: bold;
  // text-shadow: 0 0 2px white;
}

/* 为查询表单卡片添加样式 */
.query-form-card {
  margin-bottom: 20px; // 底部边距
  background-color: #fff; // 卡片背景颜色
  border-radius: 8px; // 卡片圆角
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); // 卡片阴影
  padding: 16px; // 卡片内边距
}

/* 优化后的中间卡片样式 */
.optimized-middle-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  margin-bottom: 15px;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  }
  :deep(.el-card__body) {
    padding: 15px 10px 5px 10px!important;
    // background: #ddd;
    // border-color: #ddd;
  }
}

.card-content-row {
  padding: 0;
}

.school-name-col {
  text-align: center;
}

.optimized-school-name {
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.optimized-stats {
  gap: 8px;
}

.optimized-stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;

  .stat-label {
    color: #1d2129;
    font-size: 14px;
  }

  .stat-value {
    color: #1d2129;
    // font-weight: 500;
    font-size: 16px;
  }

  .stat-ratio {
    color: #1d2129;
    font-size: 12px;
  }
}
.new-middle-card {
  transition: box-shadow 0.2s;
  &:hover {
    box-shadow: 0 6px 16px rgba(64,158,255,0.15);
    transform: translateY(-2px) scale(1.02);
  }
}
.icon-stat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}
.stat-icon-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  background: #f7f8fa;
  border-radius: 6px;
  padding: 4px 10px;
  margin: 2px 0;
  transition: background 0.2s;
  &:hover {
    background: #e6f7ff;
  }
  .stat-value {
    font-weight: bold;
    margin-left: 4px;
    color: #222;
    font-size: 15px;
  }
}
.school-name-text {
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vertical-middle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 260px;
  justify-content: flex-start;
  .vertical-school-name {
    width: 100%;
    text-align: center;
    margin-bottom: 18px;
    .school-name-text {
      font-size: 17px;
      font-weight: 600;
      color: #1d2129;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      max-width: 90%;
    }
  }
  .vertical-stat-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  .stat-icon-item-vertical {
    cursor: pointer;
    display: flex;
    align-items: center;
    background: #f7f8fa;
    border-radius: 6px;
    padding: 6px 18px;
    min-width: 120px;
    transition: background 0.2s;
    &:hover {
      background: #e6f7ff;
    }
    .stat-value {
      font-weight: bold;
      margin-left: 6px;
      color: #222;
      font-size: 15px;
    }
  }
}
.horizontal-middle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 105px;
  justify-content: flex-start;
  background: #ffe0e6;
    border-style: dashed;
    border-color: #a83857;
    border-width: 2px;
  .horizontal-school-name {
    width: 100%;
    text-align: center;
    margin-bottom: 12px;
    .school-name-text {
      font-size: 17px;
      font-weight: 600;
      color: #1d2129;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      max-width: 90%;
    }
  }
  .horizontal-stat-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
    align-items: flex-end; // 保证底部对齐
  }
 .stat-icon-item-horizontal {
    cursor: pointer;
    display: flex;
    flex-direction: column; // 纵向排列
    align-items: center;
    border-radius: 6px;
    padding: 6px 10px;
    min-width: 60px;
    transition: background 0.2s;
    &:hover {
      background: #e6f7ff;
    }
    // 新增：让内容span纵向居中
    > span {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .el-icon {
      font-size: 22px;
      margin-bottom: 2px;
      display: flex;
      justify-content: center;
      align-items: center; // 新增，垂直居中
    }
    .stat-value {
      font-weight: bold;
      margin-left: 0;
      color: #222;
      font-size: 15px;
      text-align: center;
      word-break: break-all;
    }
  }
}
</style>
